<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<style>
    .button-default {
        padding: 5px 14px;
        border: 1px solid #ddd;
        border-radius: 15px;
        color: #337ab7;
        background-color: #ffffff;
    }

    .button-default:hover {
        background-color: #f7f7f9;
    }

    button:focus {
        outline: 0;
    }
    nav{
        padding: 10px 5px 20px 5px;
    }
    h2{
        padding-top: 5px;
    }
    table{
        height: 375px;
    }
</style>
<body>
<div style="text-align: center;">
    <h2>新型冠状病毒最新</h2>
    <nav>
        请选择查询的时间:<input type="text" id="date">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        省份：<input id="province" onchange="saveProvince()"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        国家：<input id="country" onchange="saveCountry()">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="查询" onclick="search()">
    </nav>
    <table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th style="width: 5%">id</th>
            <th style="width: 15%">省/州</th>
            <th style="width: 10%">国家</th>
            <th style="width: 10%">确诊人数</th>
            <th style="width: 10%">新增人数</th>
            <th style="width: 10%">死亡人数</th>
            <th style="width: 10%">治愈人数</th>
            <th style="width: 15%">日期</th>
            <th style="width: 15%">更新时间</th>
        </tr>
        </thead>
        <tbody id="table_body">

        </tbody>
    </table>
    <div>
        <button class="button-default" onclick="previousPage()">previous</button>
        <button class="button-default" onclick="nextPage()">next</button>
        <button id="nowPage"></button>
        <button id="maxPage"></button>
    </div>
</div>
</body>
<script src="jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
<script src="laydate/laydate.js"></script>
<script>
    //执行一个laydate实例
    laydate.render({
        elem: '#date', //指定元素
        done: function (value, date, endDate) {
            searchObj.date.setFullYear(date.year, date.month - 1, date.date);
        }
    });

    $(function () {
        search();
    });

    var searchObj = {
        date: new Date(),
        country: null,
        province: null,
        page: 0,
        size: 5
    };
    var pageData = null;

    function search() {
        $('#table_body').empty();
        $.ajax({
            url: '/getList',
            data: searchObj,
            method: 'get',
            success: function (data) {
                pageData = data;
                let content = data.content;
                for (let index in content) {
                    let oneStr = " <tr>" +
                        "<td>" + content[index].covidId + "</td>" +
                        "<td>" + content[index].province + "</td>" +
                        "<td>" + content[index].country + "</td>" +
                        "<td>" + content[index].confirmedCount + "</td>" +
                        "<td>" + content[index].addedCount + "</td>" +
                        "<td>" + content[index].deathCount + "</td>" +
                        "<td>" + content[index].recoveredCount + "</td>" +
                        "<td>" + content[index].date + "</td>" +
                        "<td>" + content[index].lastUpdateDate + "</td>" +
                        "</tr>";
                    $('#table_body').append(oneStr);
                }
                $('#nowPage').text(searchObj.page);
                $('#maxPage').text(pageData.totalPages);
            }, error(xhr) {
                alert("系统错误");
            }
        })
    };


    function saveProvince() {
        searchObj.province = $('#province').val();
    }

    function saveCountry() {
        searchObj.country = $('#country').val();
    }

    function previousPage() {
        if (!pageData.first) {
            searchObj.page = searchObj.page - 1;
            search();
        }

    }

    function nextPage() {
        if (!pageData.last) {
            searchObj.page = searchObj.page + 1;
            search();
        }
    }
</script>
</html>